<!--
 * @Description: 播客主页/粉丝列表
 * @Author: 梁晓雨
 * @Date: 2025-02-19 18:28:17
-->

<template>
    <div class="common-layout">
        <span class="friend-list-title">
            粉丝列表
        </span>
        <!-- <div class="search-layout">
            <el-input placeholder="请输入博主的ID" v-model="searchInputValue" class="input-with-search">
                <template #prepend>
                  <el-button :icon="Search" @click=""></el-button>
                </template>
</el-input>
</div> -->
        <el-scrollbar height="80%">
            <div class="userinfo" v-for="item in FansListData" :key="item.fansid">
                <div>
                    <el-avatar :size="50" :src="item.userAvater" />
                    <div class="username-email">
                        <el-text class="fullWid username">
                            {{ item.username }}
                        </el-text>
                        <el-text class="fullWid email" type="info">
                            {{ item.email }}
                        </el-text>
                    </div>
                </div>
                <el-button type="danger" plain @click="removeFans(item)">踢出粉丝</el-button>
            </div>
        </el-scrollbar>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Search } from "@element-plus/icons-vue";
import store from "@/store";
import request from '@/utils/request';
import { ElMessage } from 'element-plus';

// 用户信息
interface user {
    fansid: number,
    userid: number,
    useridFans: number,
    username: string,
    email: string,
    userAvater: string,
}
// 粉丝用户信息
const FansListData = ref<user[]>([])
/**
 * @description: 获取粉丝列表
 * @return {*}
 * @Author: 梁晓雨
 * @Date: 2025-02-27 15:35:46
 */
const getFans = async () => {
    const userId = store.getters.getUser.userId;
    await request.get('/fansUser/queryAll', {
        params: {
            userid: userId
        }
    }).then(res => {
        FansListData.value = res.data
    })
}
/**
 * @description: 踢出粉丝
 * @return {*}
 * @Author: 梁晓雨
 * @Date: 2025-02-27 15:40:36
 * @param {*} item
 */
const removeFans = async (item: user) => {
    try {
        await request.delete('/fansUser/delete',{
            params:{
                id:item.fansid
            }
        })

        await getFans()

        ElMessage({
            message:'删除成功',
            type:'success'
        })
    } catch (error) {
        ElMessage({
            message:'删除失败',
            type:'error'
        })
    }
    
}
onMounted(
    getFans
)
</script>

<style lang="scss" scoped>
@use './BlogFansList.scss';
</style>
